<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Checkout</title>
  <link rel="stylesheet" type="text/css" th:href="@{/static/css/dining.css}" />
</head>
<body>

<!-- 引入公共部分 -->
<header th:replace="common/top"></header>

<div id="BackLink">
  <a th:href="@{/cart/cartForm}">Return to Shopping Cart</a>
</div>

<div id="Catalog">
  <table>
    <tr>
      <td>
        <h2>Checkout Summary</h2>
        <table>
          <tr>
            <th>Item ID</th>
            <th>Product ID</th>
            <th>Description</th>
            <th>In Stock?</th>
            <th>Quantity</th>
            <th>List Price</th>
            <th>Total Cost</th>
          </tr>

          <tr th:each="cartItem : ${cartItems}">
            <td>
              <a th:href="@{/itemForm(itemId=${cartItem.itemId})}" th:text="${cartItem.itemId}"></a>
            </td>
            <td th:text="${cartItem.item.productId}"></td>
            <td th:text="${cartItem.item.attribute1 + ' ' + cartItem.item.attribute2 + ' ' + cartItem.item.attribute3 + ' ' + cartItem.item.attribute4 + ' ' + cartItem.item.attribute5 + ' ' +  products[cartItem.item.productId].productName }"></td>
            <td th:text="${cartItem.inStock}"></td>
            <td th:text="${cartItem.number}"></td>
            <td th:text="${#numbers.formatCurrency(cartItem.item.listPrice)}"></td>
            <td th:text="${#numbers.formatCurrency(cartItem.total)}"></td>
          </tr>

          <tr>
            <td colspan="7">Sub Total: <span th:text="${subTotal}"></span></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

  <a th:href="@{/order/orderTabs(username=${session.loginAccount.username})}" class="Button">Create Order</a>
</div>

</body>
</html>